<template>
	<view>
		<view class="shell">
			<view class="image" style="background-image: url('../../static/1.JPG');"></view>
			<view class="main">
				<view :style="{'height': countryInfoHeight+'px'}"
					style="width: 90vw;margin: 40px 20px;display: grid;grid-template-rows: 30px 50px 100px;">
					<view>
						<u--text text="安流村" prefixIcon="home-fill" size="24"
							iconStyle="font-size: 28px;margin-right:10px;color:#2E3F69;">
						</u--text>
						<u-icon name="map-fill" color="#7FC4A3" size="32" @click="openMap"></u-icon>
					</view>
					<view style="margin: 10px 0;">
						<u--text text="广东省梅州市五华县安流村" color="#999999" size="16px">
						</u--text>
					</view>
					<uv-read-more show-height="200rpx" :toggle="true" color="#7FC4A3" @open="countryInfoOpen"
						@close="countryInfoClose">
						<view class="content" style="font-size: 16px;color: #888888;letter-spacing: 2px;">
							安流村，坐落于广东省梅州市五华县南部，依傍琴江河，是连接紫金及珠三角等地的关键节点。该镇占地238平方里，东邻棉洋镇，南接梅林镇，西靠周江镇，北交横陂镇，交通便利，惠水线与安浦线在此交汇。安流以农业为基，主产水稻并兼营薯类、果蔬种植及畜禽养殖，体现了典型的客家农耕文化。近年来，镇上正逐步推动产业升级，发展工业、服务业，激活经济活力，同时保留和弘扬丰富的客家文化遗产，通过文化节庆活动展现其独特魅力。凭借秀丽的自然风光与深厚的人文底蕴，安流正朝着生态、产业、文化协调发展的现代化城镇迈进。
						</view>
					</uv-read-more>
				</view>
				<view class="" style="width: 90vw;margin: -20px 20px 0 20px;display: flex;flex-direction: column;">
					<view class="" style="height: 30px;width:60px;padding-bottom:5px;border-bottom: 3px solid #7FC3A3;">
						<text style="font-size: 20px;">村支书</text>
					</view>
					<view class="cunzhishuinfo"
						style="width: 100%;height: 180px;padding:10px 0 0 8px;display: grid;grid-template-columns: 3fr 4fr;margin-top: 10px;">
						<view class="">
							<u--image :src="avatar" width="120px" height="150px">
							</u--image>
						</view>
						<view class="">
							<ul
								style="display: flex;flex-direction: column;color: #555555;font-size: 18px;letter-spacing: 2px">
								<li>朱清辉，男，汉族，1974年11月出生，大学本科学历，中共党员。2023年4月任五华县安流村书记。</li>
							</ul>
						</view>
					</view>
				</view>
				<view v-for="(i,index) in data"
					style="width: 90vw;margin: 0px 20px 20px 20px;display: flex;flex-direction: column;">
					<view class="" style="height: 30px;width:80px;padding-bottom:5px;border-bottom: 3px solid #7FC3A3;">
						<text style="font-size: 20px;">{{i.title}}</text>
					</view>
					<view class="info"
						style="width: 100%;padding:10px 0 0 8px;margin-top: 10px;display: flex;flex-direction: column;">
						<view>
							<image class="cover" style="width: 85vw;height: 200px;border-radius: 8px;" :src="i.img"
								@click="handlerImgs(i.img)">
							</image>
							<!-- 引入组件 -->
							<gyc-previewimages ref="imgs"></gyc-previewimages>
						</view>
						<view class="text" style="width: 90%;margin: 20px 10px;">
							<text
								style="color: #888888;font-size: 16px;letter-spacing: 2px;line-height: 2;text-indent: 4ch;text-align: justify;">
								{{i.content}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCulture
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				avatar: 'https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/2160301.jpeg',
				countryInfo: false,
				countryInfoHeight: 220,
				urls: [{
					src1: 'https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/IMG_4846.jpg',
				}],
				data: {}
			}
		},
		onLoad() {
			getCulture().then(res => {
				console.log(res)
				this.data = res
			})
		},
		methods: {
			handlerImgs(img) {
				// 调用组件内previewImages方法
				// 该方法传入current参数（当前展示的图片的索引），urls参数（当前展示的图片列表，格式参考imgsList）
				this.$refs.imgs.previewImages({
					current: 1,
					urls: img
				})
			},
			countryInfoOpen() {
				this.countryInfoHeight = 390
			},
			countryInfoClose() {
				this.countryInfoHeight = 220
			},
			openMap() {
				uni.openLocation({
					latitude: 23.703, // 纬度，范围为-90~90，负数表示南纬
					longitude: 115.689, // 经度，范围为-180~180，负数表示西经
					scale: 28, // 缩放比例 
					name: '安流村',
					address: '广东省梅州市五华县安流村'
				})
			}
		},
	}
</script>

<style>
	.shell {
		height: auto;
		overflow-x: hidden;
		perspective: 3px;
	}

	.shell view {
		position: relative;
		display: flex;
	}

	.image {
		transform: translateZ(-1px) scale(1.5);
		background-size: cover;
		height: 50vh;
		z-index: -1;
		top: -540px;
	}

	.main {
		background-color: #fff;
		border-radius: 30px;
		display: flex;
		/* 使用flexbox布局 */
		flex-direction: column;
		/* 设置主轴为垂直方向 */
	}

	.courtryInfoOpen {
		height: 1000px;
	}

	.courtryInfoClose {
		height: 500px;
	}
</style>
